<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">静态 Provide 演示</h1>
        <p class="text-gray-600">展示普通变量的 provide/inject 非响应式行为</p>
        <router-link to="/" class="inline-block mt-4 text-vue-green hover:underline">← 返回首页</router-link>
      </div>

      <!-- 说明卡片 -->
      <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
        <h3 class="font-semibold text-yellow-800 mb-2">⚠️ 预期行为</h3>
        <p class="text-yellow-700">
          点击"修改名字"按钮后，父组件中的变量会改变，但子组件显示的内容不会更新。
          这是因为 provide 提供的是普通字符串，不具备响应式特性。
        </p>
      </div>

      <!-- 父组件区域 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">👨‍💼 父组件</h2>
        <div class="space-y-4">
          <p class="text-gray-600">当前用户名：<span class="font-semibold text-vue-green">{{ currentUsername }}</span></p>
          <button 
            @click="changeName"
            class="bg-vue-green text-white px-6 py-2 rounded-lg hover:bg-vue-green-dark transition-colors"
          >
            修改名字
          </button>
        </div>
      </div>

      <!-- 子组件区域 -->
      <StaticChild />

      <!-- 控制台日志 -->
      <div class="bg-gray-900 text-green-400 rounded-lg p-4 mt-6">
        <h3 class="font-semibold mb-2">📝 控制台日志</h3>
        <div class="font-mono text-sm space-y-1">
          <div v-for="(log, index) in logs" :key="index" class="opacity-80">
            {{ log }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import StaticChild from '@/components/StaticChild.vue'

// 普通变量（非响应式）
let currentUsername = '小明'

// 日志记录
const logs = ref<string[]>([
  '[初始化] 父组件创建，username = "小明"',
  '[provide] 向子组件提供普通字符串 username'
])

// 向子组件提供普通变量
provide('username', currentUsername)

function changeName() {
  currentUsername = '小红'
  logs.value.push(`[${new Date().toLocaleTimeString()}] 父组件修改 username = "${currentUsername}"`)
  logs.value.push('[注意] 由于提供的是普通变量，子组件不会收到更新通知')
  console.log('父组件修改了 username =', currentUsername)
}
</script>

<style scoped>
.text-vue-green {
  color: #42b883;
}

.bg-vue-green {
  background-color: #42b883;
}

.bg-vue-green-dark {
  background-color: #369870;
}

.hover\:bg-vue-green-dark:hover {
  background-color: #369870;
}
</style>